<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body,
        .im {
            height: 100%;
        }

        .im {
            background-image: url(./年会抽奖图制作.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .text {

            color: white;
            width: 30%;
            height: 30%;
            /* background-color: pink; */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h3:nth-child(2) {
            margin-top: 30px;
        }


    </style>
</head>

<body>
    <!-- <img src="./年会抽奖图制作.png" alt=""> -->
    <div class="im">
        <div class="text">
            <h1>年会抽奖</h1>
            <h3 class="f1">一等奖:张三</h3>
            <h3 class="s2">二等奖:李四</h3>
            <h3 class="t3">三等奖:王五</h3>
        </div>
    </div>

    <script>
        let WinList = ['张三', '李四', '王五', '赵六']
        let first = document.querySelector('.f1')
        let second = document.querySelector('.s2')
        let three = document.querySelector('.t3')

        let i = 0
        let a = setInterval(function () {
            let ran1, ran2, ran3;
            do {
                ran1 = Math.floor(Math.random() * 4);
                ran2 = Math.floor(Math.random() * 4);
                ran3 = Math.floor(Math.random() * 4);
            } while (ran1 === ran2 || ran1 === ran3 || ran2 === ran3);
            first.innerHTML = `一等奖：${WinList[ran1]}`
            second.innerHTML = `二等奖：${WinList[ran2]}`
            three.innerHTML = `三等奖：${WinList[ran3]}`
            i++;
            if (i == 80)
                clearInterval(a)
        },30)
    </script>
</body>

</html>